$(function(){ 
//	plainTemplates.buildGUI();
	plainTemplates.parse();
	$(document).keydown(function(e){
		// CTRL + ALT + S
		if ( e.ctrlKey && e.altKey && e.keyCode == 83 ) {
			plainTemplates.saveStyleSheets();
			plainTemplates.saveTemplates();
			plainTemplates.saveDocument();
		}
	});
});

/**
 * Part of plainTemplates project.
 * Object for loading and saving HTML templates and Style Sheets on-the-fly.
 * 
 * Created mainly for Firebug, but works in any editor with browser preview.
 * 
 * @author		Tobiasz Cudnik <tobiasz.cudnik/gmail.com>
 * @link		http://wiadomosc.info/plainTemplate
 * @license		http://www.opensource.org/licenses/mit-license.php MIT License
 * @version		0.4 beta
 */

var plainTemplates = {
	normalizer: new RegExp('[^a-z0-9_]', 'ig'),
	name: new RegExp('([\\w\\d -]+)\\.html?$', 'i'),
	includes: {},
	// tmp only (will be curried in the future)
	content: '',
	params: window.location.search
		? window.location.search.toString().substr(1).split(',')
		: [],
	parse: function($j){
		$j = $($j);
		$j.each(function(){
			if ( this == document || this == window )
				return;
	//		if ( $(this).data().behaviorized ) {
	//			$j = $j.not( this );
	//		}
	//		$(this).data().behaviorized = true;
		});
		if (! $j.size() )
			return;
		$j.find('object[@codetype=text/template]').each(function(){ 
			plainTemplates.loadTemplate.call(this);
		});
		$j.find('object[@codetype=text/template] input.plainTemplates').keydown(function(e){ 
			// enter
			if ( e.keyCode == 13 ) {
				var $include = $(this).parents('object[@codetype=text/template]:first');
				var url = $(this).val().indexOf('.') == -1
					// automatic add '.htm' if no extension is present
					? $(this).val()+'.htm'
					: $(this).val();
				$include.attr(
					'data',
					$include.attr('archive').replace('{%1}', url)
				);
				plainTemplates.loadTemplate.call(
					$include.get(0)
				);
			}
		});
	},
	unParse: function($el) {
		$el = $el || document; 
		$el.find('[@include]').not('link').each(function(){
			$(this)
				.after("<object codetype='text/template' data='"+ $(this).attr('include') +"'></object>")
				.remove();
		});
	},
	loadTemplate: function(templateURL) {
		var url = $(this).attr('data')
			? $(this).attr('data')
			: $(this).attr('archive');
		if (! url )
			return;
		if ( plainTemplates.params.length )
			$.each(plainTemplates.params, function(k,v){ 
				v = v.indexOf('.') == -1
					? v+'.htm'
					: v;
				url = url.replace('{%'+ (k+1) +'}', v);
			});
		// dont load urls with params
		else if ( url.indexOf('{') != -1 )
			return;
		var index = url.replace( plainTemplates.normalizer, '_' );
		try{
				plainTemplates.includes[ index ] = {
				el: $(this),
				name: url.match(plainTemplates.name)[1],
				url: url
			};
		} catch(e) {
			return;
		}
		$.ajax({
			url: url,
			// sync needed because of parsing shared parent
			// can be optimized with per-element queue with setTimeout etc
			async: false,
			success: function (data){ 
				var $data = $(data)
					.attr('include', this.url)
					.insertAfter(
						plainTemplates.includes[index].el
					);
				$( plainTemplates.includes[index].el )
					.after( $data );
				plainTemplates.includes[index].el.remove();
				plainTemplates.includes[index].el = $data;
//				plainTemplates.parse($data);
				plainTemplates.parse($data.parent());
			}
		});
	},
	saveTemplates: function( url ) {
		console.log('Starting save...');
		var toSave = {};
		var query = url
			? '[@include='+ url +']'
			: '[@include]';
		// TODO marking all between-siblings as from same template if :not([@include])
		// TODO start saving from deepest includes ?
		// use plainTemplates.unParse() to get object tags
		$(query +':not(link)').each(function(){ 
			var src = $(this).attr('include');
			if ( src.substr(0,8) == 'http://' )
				return;
			if (! toSave[src] )
				toSave[src] = new Array();
			toSave[src].push(this);
		});
		$.each(toSave, function(src, elements){
			plainTemplates.content = '';
			$.each(elements, function(){
				plainTemplates.content += $('<div/>')
					.append( $(this).clone() )
					.find('*:first')
						.removeAttr('include')
						.end()
					.html();
			})
			$.post(
				'./save.php',
	 			{
					file: src,
					content: plainTemplates.content
				},
				function() {
				}
			);
		});
		console.log('Templates saved :)');
	},
	/**
	 * Always save templates before document, or you will loose your changes.
	 */
	saveDocument: function() {
		plainTemplates.unParse();
		plainTemplates.removeGUI();
		// use index.htm as default file in dir
		filename = location.pathname.slice(-1) == '/'
			? 'index.htm'
			: location.pathname.match(/\/([^\/]+)$/)[1];
		$.post(
			'./save.php',
 			{
				file: filename,
				content: '<html>'+ $('html').html() +'</html>'
			},
			function() {
				console.log('Document '+ filename +' saved :)');
			}
		);
		plainTemplates.parse();
		plainTemplates.buildGUI();
	},
	saveStyleSheets: function() { 
		var pattern = new RegExp('^(.+?){(.*)}\\s*$');
		var trim = new RegExp('^\\s*(.*?)\\s*$');
		var rgb = new RegExp('(rgb\\(\\d+, \\d+, \\d+\\))');
		var isColor;
		for ( var i=0; i < document.styleSheets.length; i++) {
			var sheet = document.styleSheets[i];
			if (! $(sheet.ownerNode).attr('include') )
				return;
			var content = '';
			for ( var ii=0; ii < sheet.cssRules.length; ii++) {
				var row = pattern.exec( sheet.cssRules[ii].cssText );
				content += row[1].match(trim)[1]
						+ ' {\n';
				$.each(
					row[2].split(';'),
					function(k, v) {
						v = trim.exec(v)[1];
						// -mod-border etc
						if (! v || v[0] == '-' )
							return;
						while( isColor = rgb.exec(v) ) {
							v = v.replace(
								isColor[1],
								new RGBColor( isColor[1] ).toHex().toUpperCase()
							);
						}
						content += '\t'+v+';\n';
					}
				);
				content += '}\n \n';
			}
			$.post(
				'./save.php',
	 			{
					file: $(sheet.ownerNode).attr('href'),
					content: content
				},
				function() {
				}
			);
		}
		console.log('Stylesheets saved :)');
	},
	buildGUI: function() {
		$.get('./plainTemplates/gui.htm', function(html) { 
			var link;
			$('head')
				.append(
					link = $.LINK({
						rel: 'stylesheet',
						href: './plainTemplates/gui.css',
						type: 'text/css'
					})
				);
			$(link).attr('include', 'true');
			$('body')
				.append(html)
				.find('#plainTemplatesGUI')
					.find('.save.all').click(function(){
						plainTemplates.saveStyleSheets();
						plainTemplates.saveTemplates();
						plainTemplates.saveDocument();
					}).end()
					.find('.save.css').click(function(){
						plainTemplates.saveStyleSheets();
					}).end()
					.find('.save.templates').click(function(){
						plainTemplates.saveTemplates();
					}).end()
					.find('.save.document').click(function(){
						plainTemplates.saveDocument();
					}).end()
					.find('.highlight').click(function(){
						plainTemplates.highlightTemplates();
					}).end()
					.find('.save').click(function(){
						$('#plainTemplatesGUI .msg')
							.css('display', 'inline')
							.text('Saved...');
							setTimeout(function(){
								$('#plainTemplatesGUI .msg')
									.hide();
							}, 1*1000);	
					}).end()
					.find('.listTemplates').click(function() { 
						var $list = $(this).find('ul');
						if ( $list.is(':hidden') ) { 
							$list.html('');
							$.each(
								plainTemplates.includes,
								function(k, v){
									var A1, A2;
									$list.append(
										$.LI(
											v.name,
											' (',
											A1 = $.A('refresh'),
											' ',
											A2 = $.A('save'),
											')'
										)
									);
									$(A1).click(function(){
										alert('not implemented yet ;');
									});
									$(A2).click(function(){
										plainTemplates.saveTemplates(v.url);
									});
								}
							);
						}
						$list.toggle();
					}).end();
		});
	},
	removeGUI: function() {
		$('#plainTemplatesGUI')
			.remove();
		$('link[@href$="plainTemplates/gui.css"]')
			.remove();
	},
	highlightTemplates: function() { 
		$('[@include]:not(link)')
			.each(function(){
				var name = $(this).attr('include').match(/\/([\w-\d]+)\.html?/)[1];
				name[0] = name[0].toUpperCase();
				$(this)
					.css('position', 'relative')
					.append("<div class='plainTemplatesHighlight'><p>"+ name +"</p></div>")
					.find('.plainTemplatesHighlight')
						.fadeTo(0, 0.5);
			});
		setTimeout(function(){	
			$('.plainTemplatesHighlight').remove();
		}, 2*1000);
	}
}

/**
 * A class to parse color values
 * @author Stoyan Stefanov <sstoo@gmail.com>
 * @link   http://www.phpied.com/rgb-color-parser-in-javascript/
 * @license Use it if you like it
 */
function RGBColor(color_string)
{
    this.ok = false;

    // strip any leading #
    if (color_string.charAt(0) == '#') { // remove # if any
        color_string = color_string.substr(1,6);
    }

    color_string = color_string.replace(/ /g,'');
    color_string = color_string.toLowerCase();

    // before getting into regexps, try simple matches
    // and overwrite the input
    var simple_colors = {
        aliceblue: 'f0f8ff',
        antiquewhite: 'faebd7',
        aqua: '00ffff',
        aquamarine: '7fffd4',
        azure: 'f0ffff',
        beige: 'f5f5dc',
        bisque: 'ffe4c4',
        black: '000000',
        blanchedalmond: 'ffebcd',
        blue: '0000ff',
        blueviolet: '8a2be2',
        brown: 'a52a2a',
        burlywood: 'deb887',
        cadetblue: '5f9ea0',
        chartreuse: '7fff00',
        chocolate: 'd2691e',
        coral: 'ff7f50',
        cornflowerblue: '6495ed',
        cornsilk: 'fff8dc',
        crimson: 'dc143c',
        cyan: '00ffff',
        darkblue: '00008b',
        darkcyan: '008b8b',
        darkgoldenrod: 'b8860b',
        darkgray: 'a9a9a9',
        darkgreen: '006400',
        darkkhaki: 'bdb76b',
        darkmagenta: '8b008b',
        darkolivegreen: '556b2f',
        darkorange: 'ff8c00',
        darkorchid: '9932cc',
        darkred: '8b0000',
        darksalmon: 'e9967a',
        darkseagreen: '8fbc8f',
        darkslateblue: '483d8b',
        darkslategray: '2f4f4f',
        darkturquoise: '00ced1',
        darkviolet: '9400d3',
        deeppink: 'ff1493',
        deepskyblue: '00bfff',
        dimgray: '696969',
        dodgerblue: '1e90ff',
        feldspar: 'd19275',
        firebrick: 'b22222',
        floralwhite: 'fffaf0',
        forestgreen: '228b22',
        fuchsia: 'ff00ff',
        gainsboro: 'dcdcdc',
        ghostwhite: 'f8f8ff',
        gold: 'ffd700',
        goldenrod: 'daa520',
        gray: '808080',
        green: '008000',
        greenyellow: 'adff2f',
        honeydew: 'f0fff0',
        hotpink: 'ff69b4',
        indianred : 'cd5c5c',
        indigo : '4b0082',
        ivory: 'fffff0',
        khaki: 'f0e68c',
        lavender: 'e6e6fa',
        lavenderblush: 'fff0f5',
        lawngreen: '7cfc00',
        lemonchiffon: 'fffacd',
        lightblue: 'add8e6',
        lightcoral: 'f08080',
        lightcyan: 'e0ffff',
        lightgoldenrodyellow: 'fafad2',
        lightgrey: 'd3d3d3',
        lightgreen: '90ee90',
        lightpink: 'ffb6c1',
        lightsalmon: 'ffa07a',
        lightseagreen: '20b2aa',
        lightskyblue: '87cefa',
        lightslateblue: '8470ff',
        lightslategray: '778899',
        lightsteelblue: 'b0c4de',
        lightyellow: 'ffffe0',
        lime: '00ff00',
        limegreen: '32cd32',
        linen: 'faf0e6',
        magenta: 'ff00ff',
        maroon: '800000',
        mediumaquamarine: '66cdaa',
        mediumblue: '0000cd',
        mediumorchid: 'ba55d3',
        mediumpurple: '9370d8',
        mediumseagreen: '3cb371',
        mediumslateblue: '7b68ee',
        mediumspringgreen: '00fa9a',
        mediumturquoise: '48d1cc',
        mediumvioletred: 'c71585',
        midnightblue: '191970',
        mintcream: 'f5fffa',
        mistyrose: 'ffe4e1',
        moccasin: 'ffe4b5',
        navajowhite: 'ffdead',
        navy: '000080',
        oldlace: 'fdf5e6',
        olive: '808000',
        olivedrab: '6b8e23',
        orange: 'ffa500',
        orangered: 'ff4500',
        orchid: 'da70d6',
        palegoldenrod: 'eee8aa',
        palegreen: '98fb98',
        paleturquoise: 'afeeee',
        palevioletred: 'd87093',
        papayawhip: 'ffefd5',
        peachpuff: 'ffdab9',
        peru: 'cd853f',
        pink: 'ffc0cb',
        plum: 'dda0dd',
        powderblue: 'b0e0e6',
        purple: '800080',
        red: 'ff0000',
        rosybrown: 'bc8f8f',
        royalblue: '4169e1',
        saddlebrown: '8b4513',
        salmon: 'fa8072',
        sandybrown: 'f4a460',
        seagreen: '2e8b57',
        seashell: 'fff5ee',
        sienna: 'a0522d',
        silver: 'c0c0c0',
        skyblue: '87ceeb',
        slateblue: '6a5acd',
        slategray: '708090',
        snow: 'fffafa',
        springgreen: '00ff7f',
        steelblue: '4682b4',
        tan: 'd2b48c',
        teal: '008080',
        thistle: 'd8bfd8',
        tomato: 'ff6347',
        turquoise: '40e0d0',
        violet: 'ee82ee',
        violetred: 'd02090',
        wheat: 'f5deb3',
        white: 'ffffff',
        whitesmoke: 'f5f5f5',
        yellow: 'ffff00',
        yellowgreen: '9acd32'
    };
    for (var key in simple_colors) {
        if (color_string == key) {
            color_string = simple_colors[key];
        }
    }
    // emd of simple type-in colors

    // array of color definition objects
    var color_defs = [
        {
            re: /^rgb\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})\)$/,
            example: ['rgb(123, 234, 45)', 'rgb(255,234,245)'],
            process: function (bits){
                return [
                    parseInt(bits[1]),
                    parseInt(bits[2]),
                    parseInt(bits[3])
                ];
            }
        },
        {
            re: /^(\w{2})(\w{2})(\w{2})$/,
            example: ['#00ff00', '336699'],
            process: function (bits){
                return [
                    parseInt(bits[1], 16),
                    parseInt(bits[2], 16),
                    parseInt(bits[3], 16)
                ];
            }
        },
        {
            re: /^(\w{1})(\w{1})(\w{1})$/,
            example: ['#fb0', 'f0f'],
            process: function (bits){
                return [
                    parseInt(bits[1] + bits[1], 16),
                    parseInt(bits[2] + bits[2], 16),
                    parseInt(bits[3] + bits[3], 16)
                ];
            }
        }
    ];

    // search through the definitions to find a match
    for (var i = 0; i < color_defs.length; i++) {
        var re = color_defs[i].re;
        var processor = color_defs[i].process;
        var bits = re.exec(color_string);
        if (bits) {
            channels = processor(bits);
            this.r = channels[0];
            this.g = channels[1];
            this.b = channels[2];
            this.ok = true;
        }

    }

    // validate/cleanup values
    this.r = (this.r < 0 || isNaN(this.r)) ? 0 : ((this.r > 255) ? 255 : this.r);
    this.g = (this.g < 0 || isNaN(this.g)) ? 0 : ((this.g > 255) ? 255 : this.g);
    this.b = (this.b < 0 || isNaN(this.b)) ? 0 : ((this.b > 255) ? 255 : this.b);

    // some getters
    this.toRGB = function () {
        return 'rgb(' + this.r + ', ' + this.g + ', ' + this.b + ')';
    }
    this.toHex = function () {
        var r = this.r.toString(16);
        var g = this.g.toString(16);
        var b = this.b.toString(16);
        if (r.length == 1) r = '0' + r;
        if (g.length == 1) g = '0' + g;
        if (b.length == 1) b = '0' + b;
        return '#' + r + g + b;
    }

    // help
    this.getHelpXML = function () {

        var examples = new Array();
        // add regexps
        for (var i = 0; i < color_defs.length; i++) {
            var example = color_defs[i].example;
            for (var j = 0; j < example.length; j++) {
                examples[examples.length] = example[j];
            }
        }
        // add type-in colors
        for (var sc in simple_colors) {
            examples[examples.length] = sc;
        }

        var xml = document.createElement('ul');
        xml.setAttribute('id', 'rgbcolor-examples');
        for (var i = 0; i < examples.length; i++) {
            try {
                var list_item = document.createElement('li');
                var list_color = new RGBColor(examples[i]);
                var example_div = document.createElement('div');
                example_div.style.cssText =
                        'margin: 3px; '
                        + 'border: 1px solid black; '
                        + 'background:' + list_color.toHex() + '; '
                        + 'color:' + list_color.toHex()
                ;
                example_div.appendChild(document.createTextNode('test'));
                var list_item_value = document.createTextNode(
                    ' ' + examples[i] + ' -> ' + list_color.toRGB() + ' -> ' + list_color.toHex()
                );
                list_item.appendChild(example_div);
                list_item.appendChild(list_item_value);
                xml.appendChild(list_item);

            } catch(e){}
        }
        return xml;

    }

}

// DOM element creator for jQuery and Prototype by Michael Geary
// http://mg.to/topics/programming/javascript/jquery
// Inspired by MochiKit.DOM by Bob Ippolito
// Free beer and free speech. Enjoy!

$.defineTag = function( tag ) {
    $[tag.toUpperCase()] = function() {
        return $._createNode( tag, arguments );
    }
};

(function() {
    var tags = [
        'a', 'br', 'button', 'canvas', 'div', 'fieldset', 'form',
        'h1', 'h2', 'h3', 'hr', 'img', 'input', 'label', 'legend',
        'li', 'ol', 'optgroup', 'option', 'p', 'pre', 'select',
        'span', 'strong', 'table', 'tbody', 'td', 'textarea',
        'tfoot', 'th', 'thead', 'tr', 'tt', 'ul', 'link', 'script' ];
    for( var i = tags.length - 1;  i >= 0;  i-- ) {
        $.defineTag( tags[i] );
    }
})();

$.NBSP = '\u00a0';

$._createNode = function( tag, args ) {
    var fix = { 'class':'className', 'Class':'className' };
    var e;
    try {
	    if(typeof(args[0]) == 'string') {
	        var newArgs = [{}];
	        for (i=0; i < args.length; i++) newArgs.push(args[i]);
	        args = newArgs;
	    }
        var attrs = args[0] || {};
        e = document.createElement( tag );
        for( var attr in attrs ) {
            var a = fix[attr] || attr;
            e[a] = attrs[attr];
        }
        for( var i = 1;  i < args.length;  i++ ) {
            var arg = args[i];
            if( arg == null ) continue;
            if( arg.constructor != Array ) append( arg );
            else for( var j = 0;  j < arg.length;  j++ )
                append( arg[j] );
        }
    }
    catch( ex ) {
        alert( 'Cannot create <' + tag + '> element:\n' +
            args.toSource() + '\n' + args );
        e = null;
    }

    function append( arg ) {
        if( arg == null ) return;
        var c = arg.constructor;
        switch( typeof arg ) {
            case 'number': arg = '' + arg;  // fall through
            case 'string': arg = document.createTextNode( arg );
        }
        e.appendChild( arg );
    }

    return e;
};